<template>
    <div class="subpage supply-agreement-container">
        <div class="head-title">友牧农场供销服务协议</div>

        <ul class="head-info">
            <li>
                <span class="tag-name"><span>甲</span>方：</span>
                <span class="tag-info">{{detail.partyAName}}</span>
            </li>
            <li>
                <span class="tag-name">身份证号：</span>
                <span class="tag-info">{{detail.partyACode}}</span>
            </li>
            <li>
                <span class="tag-name">联系方式：</span>
                <span class="tag-info">{{detail.partyAPhone}}</span>
            </li>
            <li>
                <span class="tag-name"><span>乙</span>方：</span>
                <span class="tag-info">{{detail.partyBName}}</span>
            </li>
            <li>
                <span class="tag-name">身份证号：</span>
                <span class="tag-info">{{detail.partyBCode}}</span>
            </li>
            <li>
                <span class="tag-name">联系方式：</span>
                <span class="tag-info">{{detail.partyBPhone}}</span>
            </li>
            <li>
                <span class="tag-name"><span>丙</span>方：</span>
                <span class="owner-name">{{detail.partyCName}}</span>
            </li>
            <li>
                <span class="tag-name">统一社会信用代码：</span>
                <span class="owner-code">{{detail.partyCCode}}</span>
            </li>
            <!-- <li>
                <span class="tag-name"><span>住</span>址：</span>
                <span class="owner-address">{{detail.partyCAddress}}</span>
            </li> -->
        </ul>

        <p class="title">鉴于：</p>
        <p>甲乙双方为深圳润泰丝路智能零售有限公司（以下称“丙方”）全权运营友牧农场平台（以下称“平台”）的有效用户。</p>
        <p>甲方于<span class="text-line">{{detail.signedYear || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}}</span>年<span class="text-line">{{detail.signedMonth || '&nbsp;&nbsp;&nbsp;&nbsp;'}}</span>月<span class="text-line">{{detail.signedDay || '&nbsp;&nbsp;&nbsp;&nbsp;'}}</span>日在平台签署的《友牧农场采购服务协议》（协议编号：<span class="text-line">{{detail.code || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}}</span>），购买相应数量的安格斯肉牛。同时乙方具有安格斯肉牛求购意向。现就甲乙双方通过丙方运营的平台对该肉牛进行转让，依据中国相关的法律、法规的规定，在平等、自愿、等价有偿原则基础上，三方经充分协商达成本《服务协议》（以下称“本协议"）。</p>

        <p class="title">第一条 商品名称和品种</p>
        <p>（一）商品的名称：{{detail.productName}}</p>
        <p>（二）商品数量：<span class="text-line">{{detail.quantity || '&nbsp;&nbsp;&nbsp;&nbsp;'}}</span>头（大写:<span class="text-line">{{detail.quantityText || '&nbsp;&nbsp;&nbsp;&nbsp;'}}</span>头）</p>
        <p>（三）耳标ID：<span class="text-line">{{detail.cattleIdCard || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}}</span></p>
        <p>（四）交货标准：甲方将每头牛屠宰分割后交付325kg牛胴体（包括牛躯干及四肢，不含牛头、牛蹄、牛尾、牛皮毛及牛内脏）。</p>
        <p>三方同意，协议肉牛按上述标准交付，乙方放弃肉牛胴体以外的其他部分，该等部分的所有权由丙方享有。</p>
        <p>本协议中以安格斯肉牛头数作为计量单位，每头安格斯肉牛重量为650kg，每头安格斯肉牛产出325kg牛肉。</p>

        <p class="title">第二条 商品款项及支付方式</p>
        <p>（一）商品款项：</p>
        <table border="1" class="table-box">
            <tr>
                <th>项目</th>
                <th>整牛重量({{detail.totalWeightUnit || 'kg/头'}})</th>
                <th>单价(kg/元)</th>
                <th>数量(头)</th>
                <th>总额(元)</th>
            </tr>
            <tr>
                <td>款项</td>
                <td>650</td>
                <td>{{detail.salePrice}}</td>
                <td>{{detail.quantity}}</td>
                <td>{{detail.contractMoney}}</td>
            </tr>
        </table>
        <p>（二）款项计算公式</p>
        <p><b>总额 = 650 * 单价 * 数量</b></p>
        <p><b>“总额”</b>为乙方所需向甲方支付的金额。</p>
        <p>（三）支付方式</p>
        <p>乙方应当根据本协议约定，及时通过平台线上支付渠道支付货款。</p>

        <p class="title">第三条 甲方权利义务</p>
        <p>（一）甲方应当对丙方提供本协议约定的服务提供必要的协助与配合；</p>
        <p>（二）获得乙方支付的款项；</p>
        <p>（三）向乙方转让其所持有的牛只及相应的权利义务。</p>

        <p class="title">第四条 乙方权利义务</p>
        <p>（一）乙方应当对丙方提供本协议约定的服务提供必要的协助与配合；</p>
        <p>（二）经甲方许可，乙方可在平台进行转售其通过本协议所获得牛只，转售价格由乙方和受让方协商议定，受让方在受让肉牛时，应承诺接受乙方在本协议中的全部义务;</p>
        <p>（三）未经丙方许可，乙方不得擅自将通过本协议所获得牛只向任何第三人转让、设定担保或用以偿还债务等；</p>
        <p>（四）向甲方支付相应款项；</p>
        <p>（五）乙方应确保其支付的购牛资金来源合法。</p>

        <p class="title">第五条 丙方权利义务</p>
        <p>（一）丙方负责引入保险机制，丙方支付保险费用为所有牛只投保，保障甲乙三方所转让牛只安全；</p>
        <p>（二）保障甲乙双方在求购供货业务的顺利进行；</p>
        <p>（三）丙方负责将乙方购买牛只进行屠宰加工，通过真空冷冻箱装的包装方式将牛肉配送至三方约定地点。</p>

        <p class="title">第六条 交货期限、地点和方式</p>
        <p>（一）交货期限：甲乙双方在平台进行求购供货业务时，交货时间为：<span class="text-line">{{detail.deliveryTime || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}}</span></p>
        <p>（二）交货地点：甲乙双方在平台进行求购供货业务时，所提交配送地址为：<span class="text-line">{{detail.partyBAddress || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}}</span></p>
        <p>（三）交货方式：<span class="text-line">{{detail.shipmentCategory || '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'}}</span></p>

        <p class="title">第七条 不可抗力</p>
        <p>（一）一旦本协议因不可抗力致使无法履行或延期履行，三方均可终止或暂停履行本协议，但应于不可抗力事件发生之日起五日内通知对方并提交不可抗力事件的详细情况及有效证据。如果上述不可抗力的影响未能在不可抗力事件发生之日起三十日内消除，且三方未能就变更本协议协商一致达成意见，任何一方有权解除本协议，本协议自一方向其他两方发出终止通知之日起解除。</p>
        <p>（二）“不可抗力”是指不可预见、不可避免、不可克服的客观情况，该客观情况使任何一方根据本协议履行其全部或部分义务已不可能。该事件包括但不限于地震、台风、洪水、火灾或其它天灾、战争或任何其它类似事件。</p>

        <p class="title">第八条 违约责任</p>
        <p>任何一方如违反本合同，相对方有权向违约方索赔损失，索赔损失额不超过订单额。</p>

        <p class="title">第九条 通知</p>
        <p>丙方向甲乙双方发布的通知可以短信、电话、微信、消息通知等形式发送，一经发送即视为已经向甲乙方送达。甲乙双方应当密切关注丙方发出的上述通知信息，乙方不得以未收到或未阅读上述通知信息主张相关通知未送达。</p>

        <p class="title">第十条  风险提示</p>
        <p>甲乙双方知晓并同意，若产生如下风险由甲乙双方自行承担：</p>
        <p>（一） 宏观经济风险：因宏观经济形势变化，可能引起牛只或牛肉价格等方面的异常波动，甲乙双方有可能遭受损失；</p>
        <p>（二）政策风险：有关法律、法规及相关政策、规则发生变化，可能引起牛只或牛肉价格等方面异常波动，甲乙双方有可能遭受损失；</p>
        <p>（三）因甲乙双方的过错导致的任何损失，该过错包括但不限于：决策失误、操作不当、遗忘或泄露密码、密码被他人破解、乙方使用的手机、计算机等设备被第三方侵入、甲乙双方委托他人代理操作是他人恶意或不当操作而造成的损失。</p>

        <p class="title">第十一条 隐私条款</p>
        <p>（一）甲乙双方有义务向丙方提供自己的真实资料，并保证诸如电子邮件地址、联系电话、联系地址、邮政编码等内容的有效性、安全性和及时更新，以便丙方及时、有效的向甲乙方联系并提供服务。对于丙方因通过这些联系方式而无法与甲乙双方取得联系，从而导致的甲乙双方遭受的任何损失等不利后果，应由甲乙双方完全独自承担。</p>
        <p>（二）甲乙双方同意丙方可使用关于甲乙双方的个人资料（包括但不限于甲乙双方已提供的资料）以提供更好的服务。</p>

        <p class="title">第十二条 电子合同</p>
        <p>（一）本协议采用电子合同方式，可以有一份或者多份并且每一份具有同等法律效力。甲乙双方点击确认签署的电子合同即视为甲乙双方真实意愿并以甲乙双方本人名义签署，具有法律效力。</p>
        <p>（二）甲乙双方根据本协议签署电子合同后，不得擅自修改本协议。丙方向甲乙双方提供电子合同的保管查询、核对等服务。如产生任何争议，应以丙方记录为准。</p>

        <p class="title">第十三条 其他</p>
        <p>（一）本协议未尽事宜，经甲乙丙三方协商可签订补充协议，补充协议作为本协议的一部分，与本协议具备同等法律效力。</p>
        <p>（二）本协议出现的任何纠纷，三方应当友好协商解决，协商不成的，任何一方可向丙方所在地有管辖权的人民法院提起诉讼。</p>

        <ul class="sign-box">
            <li>甲方：{{detail.partyAName}}</li>
            <li>乙方：{{detail.partyBName}}</li>
            <li>丙方：{{detail.partyCName}}</li>
            <li>日期：{{detail.createTime}}</li>
            <img src="https://ym-1251385011.cos.ap-guangzhou.myqcloud.com/images/20190930/15698083448326185.png" alt="" v-if="detail.createTime">
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            detail: {
                partyCName: '深圳润泰丝路智能零售有限公司',
                partyCCode: '91440300MA5DQYGF7L'
            }
        }
    },
    created() {
        if(this.$route.query.id != -1){
            this.getDetail()
        }
    },
    methods: {
        getDetail() {
            this.$api.get('/api/contract/detail/' + this.$route.query.id)
                .then((res) => {
                    let signedTime = res.data.createTime.split('T')[0].split('-');
                    res.data.signedYear = signedTime[0];
                    res.data.signedMonth = signedTime[1];
                    res.data.signedDay = signedTime[2];
                    res.data.createTime = this.$tool.dateFormat(res.data.createTime, 1)
                    res.data.quantityText = this.$tool.textFormat(res.data.quantity)
                    this.detail = res.data;
                })
        }
    }
}
</script>

<style lang="scss" scoped>
    .supply-agreement-container {
        padding: 16px 16px 40px;
        box-sizing: border-box;
        background-color: #fff;
        font-size: 16px;
        .head-title {
            margin-bottom: 20px;
            font-size: 18px;
            font-weight: 500;
            text-align: center;
        }
        .head-info {
            margin-bottom: 30px;
            li {
                width: 100%;
                display: flex;
                margin-bottom: 10px;
                font-weight: 500;
                &:nth-of-type(3),
                &:nth-of-type(6) {
                    margin-bottom: 30px;
                }
                .tag-name {
                    span {
                        margin-right: 32px;
                    }
                }
                .tag-info {
                    display: block;
                    flex: 1;
                    border-bottom: 1px solid #333;
                }
            }
        }
        p {
            line-height: 24px;
            margin-bottom: 10px;
            text-indent: 2em;
            font-size: 16px;
            color: #344047;
        }
        .title,
        b {
            font-weight: 500;
        }
        .table-box {
            width: 100%;
            margin-bottom: 10px;
            font-size: 12px;
            border: 1px solid #344047;
            border-right: none;
            text-align: center;
            th {
                padding: 10px 0;
                box-sizing: border-box;
                border-right: 1px solid #344047;
                border-bottom: 1px solid #344047;
                font-weight: 500;
            }
            td {
                padding: 10px 0;
                box-sizing: border-box;
                border-right: 1px solid #344047;
            }
            td:first-child {
                font-weight: 500;
            }
        }
        .text-line {
            text-decoration: underline;
            font-weight: 500;
        }
        .sign-box {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            margin-top: 40px;
            box-sizing: border-box;
            font-size: 16px;
            li {
                margin-top: 6px;
                padding-left: 60px;
            }
            img {
                position: absolute;
                top: -10px;
                right: 30px;
                width: 120px;
                height: 120px;
                object-fit: cover;
            }
        }
    }
</style>